<template>
  <div class="bind-account" v-loading.fullscreen.lock="loading">
    <template v-if="isShow">
      <div class="bind-account-title">绑定微信</div>
      <sys-cells>
        <sys-cell title="用户名">{{bindData.userId}}</sys-cell>
        <sys-cell title="微信号">{{user.nickname}}</sys-cell>
      </sys-cells>
      <sys-cells class="bind-account-btn">
        <sys-cell @click="toBind">
          <div slot="content" class="bind-account-btn-text">绑定</div>
        </sys-cell>
      </sys-cells>
    </template>
  </div>
</template>

<script>
  import Storage from 'storage';
  import WeChartApi from 'services/weChartApi';

  import GlobalData from 'utils/globalData';

  import SysCells from 'commonComponents/sysCells';
  import SysCell from 'commonComponents/sysCell';

  export default {
    data() {
      return {
        loading: false,
        isShow: false,
        bindData: null,
        user: null
      };
    },

    created() {
      let user = Storage.getSession('user');
      if (user !== null) {
        let bindData = Storage.getSession('bindData');
        this.bindData = bindData;
        this.user = user;
        this.isShow = true;
        return;
      }

      let bindData = this.$route.query;
      Storage.setSession('bindData', bindData);
      let jumpUrl = `${GlobalData.baseUrl}/weChatLogin`;
      let url = `${GlobalData.wechatAuthUrl}?redirectUrl=${encodeURIComponent(jumpUrl)}`;
      location.href = url;
    },

    methods: {
      toBind() {
        let bindData = this.bindData;
        let user = this.user;
        WeChartApi.bindAccount(bindData, user.unionid).then(() => {
          this.$alert('账号成功绑定微信，请到漫狸后台系统继续操作', '信息', {
            showClose: false,
            showConfirmButton: false
          });
          Storage.removeSession();
        });
      }
    },

    components: {
      SysCells,
      SysCell
    }
  };

</script>

<style lang="scss" scoped>
  .bind-account {
    background: #ededed;
    height: calc(100% - 10px);
    overflow: auto;
    padding-top: 10px;

    .bind-account-title {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
    }

    .bind-account-btn {
      margin-top: 20px;

      .bind-account-btn-text {
        text-align: center;
      }
    }
  }

</style>
